<template>
  <div class="draw-lots">
    <section-title title="抽签" />
    <div class="content">
      <div
        v-if="!isGetLots"
        class="icon"
        :style="{backgroundImage:`url('${icon}')`}"
        @click="getLots"
      ></div>
      <div
        class="lots-content"
        v-if="isGetLots"
        @click="navToDetail"
      >
        <p class="title">{{lots.title}}</p>
        <p class="article">{{lots.article}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
import { SectionTitle } from '@/components'
import icon from '@/assets/images/draw-lots.png'

const { mapState, mapActions } = createNamespacedHelpers('Home')

export default {
  name: 'draw-lots',
  components: { SectionTitle },
  computed: { ...mapState(['isGetLots', 'lots', 'lotsLoading']) },
  data: () => ({
    icon
  }),
  methods: {
    ...mapActions(['getLots']),
    navToDetail() {
      this.$router.push({ name: 'drawlots-detail' })
    }
  }
}
</script>

<style lang="stylus">
$icon-size = 60px;

.draw-lots {
  .icon {
    width: $icon-size;
    height: $icon-size;
    margin: 10px auto;
    background: center / cover no-repeat;
  }

  .lots-content {
    text-align: center;
  }

  .title {
    margin-bottom: 20px;
    font-size: 120%;
  }

  .article {
    width: 80%;
    margin: 0 auto;
    line-height: 1.5;
  }
}
</style>
